<template>
    <div class="admin-list-wrap">
        管理员列表

        <el-table :data="adminList" border>
            <el-table-column align="center" label="管理员编号" prop="adminid"></el-table-column>
            <el-table-column align="center" label="管理员名称" prop="adminname"></el-table-column>

            <el-table-column align="center" label="管理员等级">
                <template v-slot="{ row }">
                    {{ ['超级管理员', '普通管理员', '普通用户'][row.role - 1] }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
                <template v-slot="{ row }">
                    <el-button>编辑</el-button>
                    <el-button @click="delAdminHandler(row.adminid)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getAdminListAPI, delAdminAPI } from '@/api/admin';
import { ElMessageBox } from 'element-plus';

export default {
    name: "AdminListView",
    data() {
        return {
            adminList: []
        }
    },
    methods: {
        async getAdminList() {
            try {
                let result = await getAdminListAPI();
                console.log("请求成功", result);
                this.adminList = result.data;
            } catch (err) {
                ElMessage({
                    type: "error",
                    message: err.message,
                })
            }
        },
        async delAdminHandler(adminid) {
            ElMessageBox.confirm("是否删除当前管理员信息","提示",{
                type:"warning"
            }).then(async () => {
                try {
                    let result = await delAdminAPI({ adminid });
                    console.log("请求成功", result);

                    let index = this.adminList.findIndex(v=>v.adminid == adminid)
                    this.adminList.splice(index,1);
                } catch (err) {
                    ElMessage({
                        type: "error",
                        message: err.message,
                    })
                }
            }).catch(err => {

            })
        }
    },
    mounted() {
        this.getAdminList();
    }
}
</script>

<style lang="scss" scoped>
.admin-list-wrap {
    padding: 20px;
}
</style>